#kof {
    width: 1280px;
    /* 设置容器的宽度为 1280 像素 */
    height: 720px;
    /* 设置容器的高度为 720 像素 */

    /* 设置背景图片，使用 URL 指定图片路径 */
    background-image: url('/static/images/background/background.gif');
    /* 设置背景图片的尺寸为 200% 宽度和 100% 高度，使背景图片横向拉伸 */
    background-size: 200% 100%;
    /* 设置背景图片的位置为顶部对齐 */
    background-position: top;
    /* 设置容器的定位方式为绝对定位 */
    position: absolute;
}

#kof>.kof-head {
    width: 100%;
    /* 设置头部区域的宽度为 100%，与容器宽度一致 */
    height: 80px;
    /* 设置头部区域的高度为 80 像素 */
    position: absolute;
    /* 设置头部区域的定位方式为绝对定位 */
    top: 0;
    /* 将头部区域定位在容器的顶部 */
    display: flex;
    /* 使用 Flex 布局，使子元素水平排列 */
    align-items: center;
    /* 将子元素垂直居中 */
}

#kof>.kof-head>.kof-head-hp-0 {
    height: 40px;
    /* 设置玩家 1 血量条的高度为 40 像素 */
    width: calc(50% - 60px);
    /* 设置玩家 1 血量条的宽度为容器宽度的一半减去 60 像素 */
    margin-left: 20px;
    /* 设置左边距为 20 像素 */
    border: white 5px solid;
    /* 设置边框为白色，宽度为 5 像素 */
    border-right: none;
    /* 去掉右侧边框 */
    box-sizing: border-box;
    /* 设置盒模型为 border-box，使边框宽度包含在元素宽度内 */
}

#kof>.kof-head>.kof-head-timer {
    height: 60px;
    /* 设置计时器的高度为 60 像素 */
    width: 80px;
    /* 设置计时器的宽度为 80 像素 */
    background-color: orange;
    /* 设置背景颜色为橙色 */
    border: white 5px solid;
    /* 设置边框为白色，宽度为 5 像素 */
    box-sizing: border-box;
    /* 设置盒模型为 border-box，使边框宽度包含在元素宽度内 */
    color: white;
    /* 设置文字颜色为白色 */
    font-size: 30px;
    /* 设置字体大小为 30 像素 */
    font-weight: 800;
    /* 设置字体粗细为 800（加粗） */
    text-align: center;
    /* 设置文字水平居中 */
    line-height: 50px;
    /* 设置行高为 50 像素，使文字垂直居中 */
    user-select: none;
    /* 禁止用户选择文字 */
}

#kof>.kof-head>.kof-head-hp-1 {
    height: 40px;
    /* 设置玩家 2 血量条的高度为 40 像素 */
    width: calc(50% - 60px);
    /* 设置玩家 2 血量条的宽度为容器宽度的一半减去 60 像素 */
    border: white 5px solid;
    /* 设置边框为白色，宽度为 5 像素 */
    border-left: none;
    /* 去掉左侧边框 */
    box-sizing: border-box;
    /* 设置盒模型为 border-box，使边框宽度包含在元素宽度内 */
}

#kof>.kof-head>.kof-head-hp-0>div {
    background-color: red;
    /* 设置玩家 1 血量条的背景颜色为红色 */
    height: 100%;
    /* 设置高度为 100%，填充父容器 */
    width: 100%;
    /* 设置宽度为 100%，填充父容器 */
    float: right;
    /* 使用浮动将内容靠右对齐 */
}

#kof>.kof-head>.kof-head-hp-1>div {
    background-color: red;
    /* 设置玩家 2 血量条的背景颜色为红色 */
    height: 100%;
    /* 设置高度为 100%，填充父容器 */
    width: 100%;
    /* 设置宽度为 100%，填充父容器 */
}

#kof>.kof-head>.kof-head-hp-0>div>div {
    background-color: lightgreen;
    /* 设置玩家 1 血量条的当前血量背景颜色为浅绿色 */
    height: 100%;
    /* 设置高度为 100%，填充父容器 */
    width: 100%;
    /* 设置宽度为 100%，填充父容器 */
    float: right;
    /* 使用浮动将内容靠右对齐 */
}

#kof>.kof-head>.kof-head-hp-1>div>div {
    background-color: lightgreen;
    /* 设置玩家 2 血量条的当前血量背景颜色为浅绿色 */
    height: 100%;
    /* 设置高度为 100%，填充父容器 */
    width: 100%;
    /* 设置宽度为 100%，填充父容器 */
}